import React, { memo, useEffect } from 'react'
import {
  TopListWrapper,
  LeftWrapper,
  RightWrapper
} from './style'
import LeftList from './c-cpns/leftlist'
import ToplistDetail from './c-cpns/toplist-detail'
import {
  getToplistAction,
  getCurrentToplistDetailAction
} from './store/actionCreators'
import { useDispatch } from 'react-redux'
export default memo(function TopList() {
  const dispatch = useDispatch()
  useEffect(() => {
    dispatch(getToplistAction())
    dispatch(getCurrentToplistDetailAction(19723756))
  }, [dispatch])
  return (
    <TopListWrapper className="wrap-v2">
      <LeftWrapper>
        <LeftList/>
      </LeftWrapper>
      <RightWrapper>
        <ToplistDetail/>
      </RightWrapper>
    </TopListWrapper>
  )
})
